<script setup lang="ts">
import {ref} from "vue";
import {useStore} from "../store";
import {Admin} from "../types";
import {updateAdminInfo} from "../apis/AdminApi.ts";
import {ElMessage} from "element-plus";
import router from "../router";

const store = useStore()
const dialogFormVisible = ref(false);
const updateForm  = ref<Admin>({})

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const openUpdateAdmin = () => {
    updateForm.value = JSON.parse(JSON.stringify(store.adminInfo))
    dialogFormVisible.value = true
}
const updateAdmin = async () => {
    updateForm.value.id = updateForm.value.id + ''
    const res = await updateAdminInfo(updateForm.value)
    if(res.flag){
        store.adminInfo = res.data
        dialogFormVisible.value = false
        ElMessage.success(res.msg)
    }else {
        ElMessage.error(res.msg)
    }
}

const outLogin = () => {
    store.adminInfo = {}
    store.adminIsLogin = false
    ElMessage.success("退出成功")
    router.replace('/login')
}

</script>

<template>
  <el-menu
      :default-active="0"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect">
    <el-menu-item index="0">
      <img
          style="width: 60px"
          src="../assets/vue.svg"
          alt="Element logo"
      />
      <h2>学生选课系统</h2>
    </el-menu-item>
    <div class="flex-grow" />
    <el-sub-menu index="1">
      <template #title>{{ store.adminInfo.name }}</template>
      <el-menu-item index="1-1" @click="openUpdateAdmin">修改个人信息</el-menu-item>
      <el-menu-item index="1-2" @click="outLogin">退出登录</el-menu-item>
<!--      <el-menu-item index="1-3">item three</el-menu-item>-->
    </el-sub-menu>
  </el-menu>

<!--  修改个人信息弹窗  -->
    <el-dialog v-model="dialogFormVisible" title="修改个人信息" width="500">
        <el-form :model="updateForm">
            <el-form-item label="账号" >
                <el-input v-model="updateForm.account" autocomplete="off" disabled/>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="updateForm.password" autocomplete="off" type="password"/>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="updateForm.name" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="updateForm.phone" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="updateForm.email" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="最近登录时间">
                <p>{{updateForm.loginTime}}</p>
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updateAdmin">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>